<include file="public@header"/>
<link rel="stylesheet" href="__STATIC__/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="__STATIC__/js/datePicker/wq-datepicker.css">

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:;">假期列表</a></li>
    </ul>

    <div class="wrapper wrapper-content animated fadeInRight">
        <section class="content">
            <div class="row margin-top-20">
                <div class="col-xs-12">
                    <div id="BatchSet" class="btn-group btn-search-onTop">
                        <a  class="btn btn-sm btn-danger" dialog>批量设置</a>
                        <!--href="/Admin/BatchSetHolidays"-->
                    </div>
                    <div id="holidaySetting" class="active" avalonctrl="holidaySetting">
                        <style type="text/css">
                            #holidaySetting {
                                width: 1100px;
                            }
                        </style>
                        <div class="card" style="padding-bottom: 10px;">
                            <div class="card-body">
                                <div style="margin: 10px 20px;">提示：请点击右侧的“编辑”按钮来添加或修改节假日。</div>
                                <div class="table-responsive" style="margin:0px 20px;width:722px;float: left;">
                                    <div id="wholeCalendar" style="width:722px" class="clearfix dp-wrapper">
                                        <a class="dp-pre year"></a>
                                        <a class="dp-next year"></a>
                                    </div>
                                </div>
                                <div class="card select-result" >
                                    <div class="card-head">
                                        <div>节假日列表：<span id="holidayCount"></span></div>
                                        <div class="pull-right" style="float:right;">
                                            <a class="btn btn-primary" id="edit" style="display: inline-block;"><i class="md md-mode-edit" title="编辑"></i>编辑</a>
                                            <span style="display: none;" id="editButtons">
                                        <a class="btn btn-success" id="save">保存</a>
                                        <a class="btn btn-default triggerClosePopup" id="cancel">取消</a>
                                        <a class="btn btn-icon-toggle" title="清空" id="clearAll"> <i class="fa fa-trash-o"></i></a>
                                    </span>
                                        </div>
                                    </div>
                                    <!--end .card-head -->
                                    <div class="card-body no-padding multi-selected">
                                        <ul class="list"></ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

</div>

<div id="BatchSetHoliday" style="display: none;">
    <form action="" class="row well" style="margin:0;">
        <div class="row form-group form-inline" style="margin-bottom: 15px;">
            <label for="" class="form-group col-xs-3">年限:</label>
            <!--<input class="col-xs-3" id="startYear" name="startYear" type="text" value="2017">-->
            <select name="startYear" class="form-control col-xs-4" id="startYear">
            </select>
            <span class="col-xs-1">-</span>
            <select name="endYear" class="form-control col-xs-4" id="endYear">
            </select>
            <!--<input class=" col-xs-3" id="endYear" name="endYear" type="text" value="2017">-->
        </div>
        <div class="row form-group">
            <label for="" class="col-xs-3">
                休息日:
            </label>
            <div class="col-xs-9" style="padding: 0;">
                <label for="">
                    <input type="checkbox" value="1">
                    星期一
                </label>
                <label for="">
                    <input type="checkbox" value="2">
                    星期二
                </label>
                <label for="">
                    <input type="checkbox" value="3">
                    星期三
                </label>
                <label for="">
                    <input type="checkbox" value="4">
                    星期四
                </label>
                <label for="">
                    <input type="checkbox" value="5">
                    星期五
                </label>
                <label for="">
                    <input type="checkbox" value="6">
                    星期六
                </label>
                <label for="">
                    <input type="checkbox" value="0">
                    星期日
                </label>
            </div>
        </div>



    </form>

</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript" src="__STATIC__/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="__STATIC__/js/datePicker/wq-datepicker.js"></script>

<script>

    $(function () {
        var curYear = new Date().getFullYear();
        function init() {
            $.get("{:url('educational/Holiday/ajaxGetHoliday')}", { year:curYear }, function (data) {
                model.holidays = [];
                model.choosed = data.slice(0);
                model.holidays = data;
                changeSelected();
                updateHolidays(data);
            });
        }

        init();

        var sel;
        var q = WqDatepicker({
            container: "#wholeCalendar",
            otherdays: false,
            multi: false,
            click2selected: true,
            wholeYear: true,
            onClick: function (selected) {
                if (model.flag) {
                    var selLen = sel.length;
                    var len = selected.length;
                    selected.sort();
                    if (len > selLen) {
                        for (var i = 0; i < len; i++) {
                            var index = sel.indexOf(selected[i]);
                            if (index == -1) {
                                model.choosed.splice(i, 0, { Name: "", Date: selected[i] });
                                sel.splice(i, 0, selected[i]);
                                appendHoliday(selected[i], i);
                                break;
                            }
                        }
                    } else if (selLen > len) {
                        for (var j = 0; j < selLen; j++) {
                            var index = selected.indexOf(sel[j]);
                            if (index == -1) {
                                model.choosed.splice(j, 1);
                                sel.splice(j, 1);
                                removeHoliday(j);
                                break;
                            }
                        }
                    }
                } else {
                    $("#wholeCalendar td").removeClass("active");
                    layer.msg("请点击右侧的“编辑”按钮来添加或修改节假日。");
                    changeSelected();
                }
            },
            onChangeYear: function (year) {
                curYear = year;
                if (model.flag) {
                    layer.msg("今年的节假日尚未保存。")
                } else if (!model.flag) {
                    init();
                }
            }
        });

        var selector = ".year";
        var model = {
            id: 'holidaySetting',
            choosed: [],
            holidays: [],
            flag: false,
            sendTime: "",
            showEdit: function () {
                model.flag = true;
                $("#editButtons").show();
                $("#edit").hide();
                $(".listDiv").css("display", "inline");
                $(".description").hide();
                changeSelected();
                q.setForbid(selector, true);
            },
            removeChoosed: function (index) {
                model.choosed.splice($(this).closest("li").index(), 1)
                $(this).closest("li").remove();
                changeSelected();
            },
            clearChoosed: function () {
                model.choosed.length = 0;
                q.clearSelected();
                sel = [];
                $(".list").children().remove();
            },
            cancel: function () {
                model.flag = false;
                $("#editButtons").hide();
                $("#edit").show();
                $(".listDiv").hide();
                $(".description").css("display", "inline-block");
                model.choosed = model.holidays.slice(0, model.holidays.length);
                changeSelected();
                updateHolidays(model.holidays);
                q.setForbid(selector, false);
            },
            submitHoliday: function () {

                loading = layer.load(0, { shade: false });

                var json = "";
                $(".list li").each(function () {
                    var date = $(this).find("span:eq(0)").text();
                    var name = $(this).find("input").val();
//                    json = json + "{Name:'" + name + "',Date:'" + date + "'},";
                    json = json + "{'Name':'" + name + "','Date':'" + date + "'},";
                });
                var para = {
                    Data: '[' + json.substring(0, json.length - 1) + ']',
                    Year: curYear
                };
                $.post("{:url('educational/Holiday/ajaxAddHoliday')}", para, function (data) {
                    layer.msg(data.Message, { icon: data.Status, time: 1500 }, function () {
                        layer.closeAll();
                    });
                    init();
                });

                model.flag = false;
                $("#editButtons").hide();
                $("#edit").show();
                q.setForbid(selector, false);
            }
        };

        function changeSelected() {
            var arr = [];
            $.each(model.choosed, function (k, value) {
                arr.push(model.choosed[k].Date);
            });
            sel = arr;
            q.setSelected(arr);
            q.setHoliday(model.holidays);
        }

        function updateHolidays(holidaysArr) {
            $(".list").empty();
            $("#holidayCount").text(holidaysArr.length);
            if (holidaysArr.length == 0) {
                return;
            }
            var spanDisplay = model.flag ? "none" : "inline";
            var divDisplay = model.flag ? "inline" : "none";
            for (var i = 0; i < holidaysArr.length; i++) {
                var li = "<li>" +
                    "<span style='width:110px'>" + holidaysArr[i].Date + "</span>" +
                    "<span style='width: 130px; display:" + spanDisplay + ";' class='description'>" + holidaysArr[i].Name + "</span>" +
                    "<div style='display: " + divDisplay + ";' class='listDiv'>" +
                    "<input type='text' class='form-control' placeholder='请输入节假日名称' style='width:136px' value='" + holidaysArr[i].Name + "'>" +
                    "<a class='btn btn-icon-toggle remove' title='移除'>" +
                    "<i class='fa fa-trash-o'></i>" +
                    "</a>" +
                    "</div>" +
                    "</li>";
                $(".list").append(li);
            }
        }

        function appendHoliday(date, index) {
            var li = "<li>" +
                "<span style='width:110px'>" + date + "</span>" +
                "<span style='width: 130px; display:none;' class='description'></span>" +
                "<div style='display:inline;' class='listDiv'>" +
                "<input type='text' class='form-control' placeholder='请输入节假日名称' style='width:136px'>" +
                "<a class='btn btn-icon-toggle remove' title='移除'>" +
                "<i class='fa fa-trash-o'></i>" +
                "</a>" +
                "</div>" +
                "</li>";
            if (index >= $(".list").children().size()) {

                $(".list").append(li);
            } else {
                $(".list li:eq(" + index + ")").before(li)
            }
        }

        function removeHoliday(index) {
            $($(".list").children()[index]).remove();
        }

        $(document).on("click", "#edit", model.showEdit);
        $(document).on("click", "#save", model.submitHoliday);
        $(document).on("click", "#cancel", model.cancel);
        $(document).on("click", "#clearAll", model.clearChoosed);
        $(document).on("click", ".remove", model.removeChoosed);

//    批量设置假期
        $(document).on('click','#BatchSet',function () {
            var curYear = new Date().getFullYear();
            $("#startYear,#endYear").find('option').remove();

            if($("#startYear").val()){
                var selectedYear = $("#startYear").val();
            }else{
                var selectedYear = curYear;
            }

            for(var i=selectedYear-9;i<selectedYear+11;i++){
                var opt=$("<option/>").val(i).text(i);
                $("#startYear").append(opt);
            }
            $("#startYear").val(2017);

            if($("#endYear").val()){
                var selectedYear = $("#endYear").val();
            }else{
                var selectedYear = curYear;
            }

            for(var i=selectedYear-9;i<selectedYear+11;i++){
                var opt=$("<option/>").val(i).text(i);
                $("#endYear").append(opt);
            }

            $("#endYear").val(2017);


            layer.open({
                type: 1,
                btn: ['提交'],
                title: '批量设置节假日',
                content: $('#BatchSetHoliday'),
                yes: function (index, layero) {
                    loading = layer.load(0, { shade: false });
                    batchSetDate();
                }
            });
        });

        //选择开始年份后,结束年份自动选择开始年份的当年以及后十年
        $('#startYear').change(function () {
            var $this=$(this);
            var selectedYear=parseInt($this.val());
            $this.find("option").remove();
            $('#endYear').find("option").remove();

            for (var i=selectedYear-9;i<selectedYear+11;i++){
                var opt=$("<option/>").val(i).text(i);
                if(i >= selectedYear){
                    $('#endYear').append($("<option/>").val(i).text(i));
                }
                $this.append(opt);

            }
            $this.val(selectedYear);
            $('#endYear').val(selectedYear);

        })

        $('#endYear').change(function () {
            var $this=$(this);
            var selectedYear=parseInt($this.val());
            $this.find("option").remove();
//            $('#startYear').find("option").remove();

            for (var i=selectedYear-9;i<selectedYear+11;i++){
                var opt=$("<option/>").val(i).text(i);
//                if(i <= selectedYear){
//                    $('#startYear').append($("<option/>").val(i).text(i));
//                }
                $this.append(opt);

            }

            $this.val(selectedYear);
//            $('#startYear').val(selectedYear);

        })

        function  batchSetDate() {
            var startYear=parseInt($('#startYear').val());
            var endYear=parseInt($('#endYear').val());
            var selectDay=$("input:checkbox:checked");
            var selectDayArr=[];//获得多选日期[0=sunday,1=Monday...]
            selectDay.each(function(){
                selectDayArr.push(parseInt($(this).val()));
            })

            var paraArr=[];
            var json = "";
            var x=endYear-startYear;
            var preData='',preYear='',preId='';

            if (x==0){
                curYear=startYear;
                selectDayArr.forEach(function(x){
                    for (var i=0;i<7;i++){
                        if(new Date(curYear,0,1+i).getDay()==x){
                            var firstSunday=curYear+'-1-'+parseInt(1+i);
                            var day=parseInt(i+1);
                        }
                    }

                    for (var j=0;j<60;j++){
                        if (new Date(curYear,0,day+j*7).getFullYear()<parseInt(curYear+1)){
                            var date=new Date(curYear,0,day+j*7).getFullYear()+'-'
                                +parseInt(new Date(curYear,0,day+j*7).getMonth()+1)+"-"
                                +new Date(curYear,0,day+j*7).getDate();
                            json=json+"{'Name':'休息日"+"','Date':'"+date+"'},";
                        }
                    }

                })
                var para = {
                    Data: '[' + json.substring(0, json.length - 1) + ']',
                    Year: curYear
                };

                para={
                    Data:'['+para.Data+']',
                    Year:'['+para.Year+']'
                }
            }else{
                for(var i=0;i<=x;i++){
                    var json="";
                    curYear=parseInt(startYear+i);
                    selectDayArr.forEach(function(x){
                        for (var i=0;i<7;i++){
                            if(new Date(curYear,0,1+i).getDay()==x){
                                var day=parseInt(i+1);
                            }
                        }

                        for (var j=0;j<60;j++){
                            if (new Date(curYear,0,day+j*7).getFullYear()<parseInt(curYear+1)){
                                var date=new Date(curYear,0,day+j*7).getFullYear()+'-'
                                    +parseInt(new Date(curYear,0,day+j*7).getMonth()+1)+"-"
                                    +new Date(curYear,0,day+j*7).getDate();
                                json=json+"{'Name':'休息日"+"','Date':'"+date+"'},";
                            }
                        }

                    })
                    var para = {
                        Data: preData+','+'[' + json.substring(0, json.length - 1) + ']',
                        Year: preYear+','+curYear
                    };
                    preData=para.Data;
                    preYear=para.Year;
                }
                para={
                    Data:'['+preData.slice(1,preData.length)+']',
                    Year:'['+preYear.slice(1,preYear.length)+']'
                }
            }


            $.post("{:url('educational/Holiday/ajaxBatchHolidays')}", para, function (data) {
                layer.msg(data.Message, { icon: data.Status, time: 1500 }, function () {
                    layer.closeAll();
                    window.location.reload();
                });
                init();
            });

            model.flag = false;
            $("#editButtons").hide();
            $("#edit").show();
            q.setForbid(selector, false);

        }



    });






</script>


<script>
    $(function () {
        if ('' != 'true') {
            $(document).keydown(function () {
                if (window.parent.resetTime) {
                    window.parent.resetTime();
                }
            });
            $(document).click(function () {
                if (window.parent.resetTime) {
                    window.parent.resetTime();
                }
            });
        }

        //if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        //    $('.selectpicker').selectpicker('mobile');
        //}

        $(window.parent.document).find(".second-level-active").children().click(function (e) {
            e.preventDefault();
            if (!window) {
                return;
            }
            var ifrmaeUrl = ($(window.parent.document).find(".second-level-active").children().attr("href"));
            var iframe = $(window.parent.document).find("iframe[src ='" + ifrmaeUrl + "']");
            iframe.attr("src", iframe.attr("src"));
        })
    });
</script>

</body>
</html>
